import React, { useCallback, useEffect, useState } from 'react';
import { Card, Table, Row, Col, Form, Input, Select, Button, Space, } from 'antd';
import createDrawerWithForm from 'comp/BaseDrawer';
import DriverForm from 'comp/Datasource/DriverForm';
import { pageList, saveDriver, getAllDriverType } from 'api/DriverManagerApi';
import { $message, SUCCESS_CODE } from 'utils/CommonUtil';
import useFetchWithPageTable from 'hooks/useFetchWithPageTable';
import { useFetch } from 'hooks/useFetch';

export const DriverManage = () => {
  const [searchForm] = Form.useForm();

  // 查询参数加载驱动类型
  const {
    data: driverType,
  } = useFetch(getAllDriverType, {});


  // 查询驱动列表数据
  const {
    data: driverList,
    total,
    pagination,
    setSearch,
    handlePaginationChange,
    reset,
  } = useFetchWithPageTable(pageList);


  // 添加驱动
  const onAddDriver = () => {
    createDrawerWithForm(DriverForm, {
      okTrigger: async (data, closeTrigger) => {
        const params = await data;
        const res = await saveDriver(params);
        if (res && res.code === SUCCESS_CODE) {
          $message.info(res.msg);
          closeTrigger();
          setSearch({});
        } else {
          $message.error(res.msg);
        }
      }
    })
  }

  // 处理搜索
  const handleSearch = async () => {
    const values = await searchForm.validateFields();
    setSearch(values);  // 更新搜索条件,触发 初始加载数据
  }

  // 重置
  const handleReset = () => {
    searchForm.resetFields();
    reset();
  }

  const handleRowEdit = (record) => {
    console.log(record);

  }

  const handleRowDel = (record) => {
    console.log(record);

  }


  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 200
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center'
    },
    {
      title: '驱动类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: 150
    },
    {
      title: '驱动程序包',
      dataIndex: 'libFileName',
      key: 'libFileName',
      align: 'center'
    },
    {
      title: '版本号',
      dataIndex: 'version',
      key: 'version',
      align: 'center'
    },
    {
      title: '操作',
      name: 'oper',
      key: 'oper',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => handleRowEdit(record)}>编辑</a>
          <a onClick={() => handleRowDel(record)}>删除</a>
        </Space>
      )
    },

  ]

  return (
    <>
      <Card style={{ marginBottom: 20 }}>
        <Row>
          <Col flex="1 1 200px">
            <Form
              layout='inline'
              form={searchForm}
              name="control-hooks"
              style={{ maxWidth: 1000 }}
              onFinish={handleSearch}
            >
              <Form.Item name="name" label="名称">
                <Input placeholder='请输入名称' style={{ width: 200 }} allowClear />
              </Form.Item>
              <Form.Item name="type" label="驱动类型">
                <Select style={{ width: 200 }} allowClear options={driverType}>

                </Select>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType='submit' >
                  搜索
                </Button>
                <Button style={{ marginLeft: '15px' }} onClick={handleReset} >
                  重置
                </Button>
              </Form.Item>
            </Form>
          </Col>
          <Col flex="0 1 100px">
            <Button type="primary" onClick={onAddDriver}>
              添加驱动
            </Button>
          </Col>
        </Row>
      </Card>
      <Table
        rowKey='id'
        columns={columns}
        dataSource={driverList}
        pagination={{
          ...pagination,
          total,
          showSizeChanger: true,
          showTotal: (total) => `共${total}条记录`,
          pageSizeOptions: [3, 5, 10]
        }}
        onChange={handlePaginationChange}
      />
    </>
  )
}
